<template>
  <view :style="{height : pageHeight + 'px'}" class="content">
    <!-- 消息类型 -->
    <view class="newsType">
      <view class="leftTips">
        通知类型
      </view>
      <uni-data-checkbox v-model="newsType" :localdata="radioItems" @change="change"></uni-data-checkbox>
    </view>
    <!-- 消息标题 -->
    <view class="newsTitle">
      <view class="titleInput">
        <input v-model="sendData.headline" placeholder="输入标题" placeholder-class="inputPlaceholder" type="text">
      </view>
    </view>
    <!-- 消息内容 -->
    <view class="newsContent">
      <view class="contentTextraea">
				<textarea v-model="sendData.content" cols="30" maxlength="-1"
                  placeholder="输入内容" placeholder-class="inputPlaceholder"
                  rows="10" style="width: 100%; font-size: 27rpx; height: 480rpx;"></textarea>
      </view>
    </view>
    <!-- 集合消息图片 -->
    <view class="newsImage">
      <view @click="selcetImage">
        <view v-if="sendData.assemblePlaceUrl == ''" class="imageWarp">
          <image class="addImage" mode="aspectFit"
                 src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/upLoadIcon.png"></image>
        </view>
        <view v-else class="showImage">
          <image :src="imageArr[0]" mode="aspectFit" style="height: 100rpx; width: 100rpx;"></image>
        </view>
      </view>

    </view>
    <!-- 定位地址 -->
    <view v-if="newsType ==='gather'" class=" gatherAddress">
      <view class="address">
        {{ sendData.assemblePlaceName }}
      </view>
      <view class="icon" @tap="selectPlace">
        <image mode="aspectFit" src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/locationPornt.png"
               style="width: 40rpx;height: 40rpx;"></image>
      </view>
    </view>
    <view class="separateBox">

    </view>
    <!-- 提交 -->
    <view class="submitWarp">
      <view class="submit" @tap="submit">提交</view>
    </view>

    <!-- 图片点击操作列表 -->
    <tui-actionsheet :item-list="itemList" :show="showActionSheet" @cancel="closeActionSheet"
                     @click="selectClick"></tui-actionsheet>

    <!-- 图片查看 -->
    <view class="tui-page__bd">
      <tui-gallery :show="previewImage" :urls="urls" @hide="hidePreview"></tui-gallery>
    </view>
  </view>
</template>

<script>
import {
  newlyMessageAssemble
} from '@/api/tourplan.js';
import WebSocketClass from "@/common/webSocket.js";
import {
  baseUrl
} from "@/common/unit.js";

export default {
  data() {
    return {
      pageHeight: 750,
      newsType: 'gather',
      serverUrl: baseUrl + '/user/uploadFile/uploadFile',
      imageArr: [],
      urls: [{
        src: '',
        desc: ''
      }],
      previewImage: false,
      uploadHeader: {
        Authentication: ''
      },
      radioItems: [{
        "value": 'gather',
        "text": "集合"
      },
        {
          "value": 'notice',
          "text": "通知",
        }
      ],
      showActionSheet: false, //操作列表显示
      itemList: [{
        text: "查看",
        color: "#2B2B2B"
      }, {
        text: "删除",
        color: "#ff0000"
      }],
      sendData: {
        phone: uni.getStorageSync("userinfo").phone,
        headline: '',
        content: '',
        itineraryId: 0,
        assemblePlaceUrl: '', //图片上传地址
        type: null, //消息类型
        assemblePlaceName: '选择集合点', //集合点名称
        assemblePlaceX: null, //集合点x坐标
        assemblePlaceY: null, //集合点y坐标
        sender: null, //发送人类型
      },
      groupId: null,
    }
  },
  onLoad: function (options) {
    const that = this
    uni.getSystemInfo({
      success: function (res) {
        that.pageHeight = res.windowHeight
      }
    });
    that.initData(options)
  },
  methods: {
    initData(options) {
      const that = this
      that.newsType = options.type
      that.sendData.itineraryId = Number(options.itineraryId)
      const rolesJSON = decodeURIComponent(options.roles)
      let roles = JSON.parse(rolesJSON)
      that.sendData.sender = roles.principal ? 1 : 2
      that.uploadHeader.Authentication = uni.getStorageSync('userinfo').authentication
      that.groupId = Number(options.groupId)
    },
    change(e) {
      console.log(this.newsType)
    },
    //提交校验
    submit() {
      const that = this
      that.sendData.type = that.newsType === 'gather' ? 1 : 2;
      console.log('输出', that.sendData.assemblePlaceX, that.sendData.assemblePlaceY, that.sendData.type === 1,
          that.sendData.assemblePlaceX && that.sendData.assemblePlaceY && that.sendData.type === 1);
      if (that.sendData.sender === 2) {
        that.sendData.groupId = that.groupId
      }
      if (that.sendData.headline == '') {
        that.showTips('请输入标题')
      } else if (that.sendData.content == '') {
        that.showTips('请输入内容')
      } else if (that.sendData.assemblePlaceX == null && that.sendData.assemblePlaceY == null && that.sendData
          .type === 1) {
        that.showTips('请选择集合地点')
      } else {
        that.sendNotice()
      }
    },
    //打开地图开始选择位置
    selectPlace() {
      const that = this
      uni.chooseLocation({
        success: function (res) {
          console.log('位置名称：' + res.name);
          console.log('详细地址：' + res.address);
          console.log('经度：' + res.longitude);
          console.log('纬度：' + res.latitude);
          that.sendData.assemblePlaceName = res.name
          that.sendData.assemblePlaceX = res.latitude
          that.sendData.assemblePlaceY = res.longitude
        }
      });
    },
    //发送通知
    sendNotice() {
      const that = this
      newlyMessageAssemble(that.sendData).then(res => {
        /* this.$event.notify('changeMessage', {
          updata: true
        }) */
        uni.navigateBack()
      })
    },
    //封装uni原生提示
    showTips(title) {
      uni.showToast({
        title: title,
        icon: 'none',
        duration: 3000
      })
    },
    //点击图片选择
    selcetImage() {
      const that = this
      if (that.sendData.assemblePlaceUrl != '') {
        that.showActionSheet = true
      } else {
        that.uploadImage()
      }
    },
    //操作列表点击
    selectClick: function (e) {
      const that = this
      let index = e.index;
      if (index === 1) {
        //删除
        that.sendData.assemblePlaceUrl = ''
        that.imageArr = []

      } else {
        //查看大图
        that.urls[0].src = that.sendData.assemblePlaceUrl
        that.previewImage = true
      }
      this.closeActionSheet();
    },
    //关闭操作列表
    closeActionSheet() {
      this.showActionSheet = false
    },
    //图片上传
    uploadImage() {
      const that = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
          const tempFilePaths = res.tempFilePaths;
          uni.uploadFile({
            url: that.serverUrl, //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: 'file',
            header: that.uploadHeader,
            success: (uploadFileRes) => {
              console.log(uploadFileRes)
              const result = JSON.parse(uploadFileRes.data)
              that.sendData.assemblePlaceUrl = result.data
              that.imageArr[0] = result.data
              // https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/upLoadIcon.png" mode="aspectFit
            }
          });
        }
      })
    }
  }
}
</script>

<style>
@import url('sendNews.css');
</style>
